import useRoute from '@/hooks/useRoute';
import DetailImgs from './components/DetailImgs';
import DetialMap from './components/DetialMap';
import './index.less';
import { useEffect, useState } from 'react';
import { getImgCount, zuoBiaos } from '@/utils';

export default function Detail() {
  const { getPageParams } = useRoute();
  const [longitude, setLongitude] = useState<any>();
  const [latitude, setLatitude] = useState<any>();
  const [num, setNum] = useState<any>(0); // 图片数量
  const [imgIndex, setImgIndex] = useState<any>(null); // 图片索引
  const [imgUrl, setImgUrl] = useState<string>('');

  useEffect(() => {
    const long = +(getPageParams('longitude') || 0);
    const lat = +(getPageParams('latitude') || 0);
    setLongitude(long);
    setLatitude(lat);
    setNum(getImgCount(zuoBiaos, long, lat));
  }, []);

  return (
    <div className="demoDetail page">
      {longitude && (
        <>
          <DetialMap
            NUM={num}
            longitude={longitude}
            latitude={latitude}
            setImgIndex={setImgIndex}
            imgUrl={imgUrl}
            setImgUrl={setImgUrl}
          />
          <DetailImgs NUM={num} imgIndex={imgIndex} setImgUrl={setImgUrl} />
        </>
      )}
    </div>
  );
}
